/* ++++++++++++++++++++Default para elementos normales++++++++++ */
/* 20150112: el propósito de este archivo, es que reemplace y escale a los antiguos  css_estilos_comunes.css y default_theme_estiloscomunes.css   */
/*
 *FILOSOFÍA para que algo esté aquí: 20150216 si en algún momento alguna plantilla debe ser una EXCEPCIÓN a alguna de estas reglas, y es imposible
 *contrarrestarla (por ejemplo, un contenedor dentro de body), entonces seguramente la regla no pertenece aquí. No se quiere redundancia,
 *sólo una base común válida para todas las plantillas y temas. La idea no es que esto sea una especie de "user-agent style sheet", porque
 *en CSS no he encontrado todavía de qué manera se puede especificar la precedencia de una manera general para una hoja de estilos.
 *Mientras no se pueda forzar a que una hoja de estilos tenga una precedencia menor que las demás hojas que participen, como ocurre con 
 la hoja de estilos por defecto del navegador, entonces será necesario que se evite al máximo REPETIR reglas para un mismo grupo de elementos.
 
 ÍNDICE de esta hoja de estilos [Se genera con la instrucción 
				    grep -ir -E "##[A-Za-z0-9 ]*" comun_estilos_comunes.css --only-matching ]
    ##BASES PARA UBICACIÓN GEOMÉTRICA
    ##Ventanas 
    ##Tablas 
    ##Textos raw 
    ##Elementos generales
    ##Formularios
    ##Mensajes
 
     HÁBITOS Y TROUBLESHOOT de css: ver http://elexperimento.com/aprendizajes/computacion/css/aprendizajes
					http://elexperimento.com/aprendizajes/computacion/css/troubleshoot
    
    1. Mejor que un padding, es un contenedor interno con su propio margin. La justificación, es que los diferentes navegadores no tienen
      consenso acerca de si la propiedad width incluye o no el width, es más estándar con el margin. 
      
 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ##BASES PARA UBICACIÓN GEOMÉTRICA: Reglas básicas para que la UBICACIÓN GEOMÉTRICA sea compatible entre navegadores:  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Común a comun_estilos_comunes.css, durante la transición de una hoja de estilos final. */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 15px;
}
div, p, form, table {
    /* margin: 0;  */
    margin: auto; /* Para que por defecto se centre */
    padding: 0; /* Para que sea predecible en todos los navegadores, no todos toman el width incluyendo el padding. */
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Fin de BASES PARA UBICACIÓN GEOMÉTRICA */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ##Ventanas */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
iframe {
    overflow: scroll;
    width: 90%;
    height: 500px;    
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Fin de ventanas */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ##Tablas */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
table {
    border-collapse: collapse;
    border: 3px solid black;
}
table th, table td {
    padding: 10px;
}
table th {
    background: #E1E1E1;
    border: 1px solid black;    
}
table td {
    border: 1px solid black;
}
.celda_con_cifras_de_dinero {
    /* Aplica para los recibos de reintegro */
    text-align: right;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Fin de tablas */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ##Textos raw */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
pre { /* Tomado de http://perishablepress.com/wrapping-content/
                  http://stackoverflow.com/questions/5241369/word-wrap-a-link-so-it-doesnt-overflow-its-parent-div-width */
    /*overflow: scroll;*/
    white-space: -hp-pre-wrap;  /* HP Printers */    
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: pre-line;      /* CSS 3.0, si se hace predominar, permite partir palabras largas sin espacios */
    white-space: -o-pre-wrap; /* Opera */
    
    word-wrap: break-word; /* Parece que también permite partir palabras y urls largas. */
    word-break: normal; /* Ver http://www.w3schools.com/cssref/css3_pr_word-break.asp */
}
.forzarwrap { /* Versión 20150218: Probado exitosamente en la esquiva tabla de Comun_SystemRegistroDeModificacion/admin
		Que fuerce el partido, sin importar que se partan las palabras.
		En http://stackoverflow.com/questions/499137/css-how-can-i-force-a-long-string-without-any-blank-to-be-wrapped-in-xul-and
		anotan sugieren fijar el width y usar "word-wrap:break-word;"
		<<The answer uses the "word-wrap" rule, not the "word-break" one; the former is supported as used in almost every browser used today. Where "partial support" is indicated, it appears that the "break-word" value for the "word-wrap" rule is still viable. –  Robusto Feb 14 '14 at 17:24 >>
		En
		http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
		también apoyan la directiva "word-wrap: break-word;"
	    */
    x-overflow: hidden;    
    /* ABAJO: tomado de http://stackoverflow.com/questions/5241369/word-wrap-a-link-so-it-doesnt-overflow-its-parent-div-width */
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: pre-line;      /* CSS 3.0, si se hace predominar, permite partir palabras largas sin espacios */
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+  Parece que también permite partir palabras y urls largas. */
    /*word-break: normal; /* Ver http://www.w3schools.com/cssref/css3_pr_word-break.asp */
}
hr {
    display: block;
    clear: both;    
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Fin de Textos raw */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ##Elementos generales, comunes a las páginas */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#mensaje_de_que_no_esta_activado_javascript { 	/* NO ESTÁ AQUÍ.
    aquí está VACÍA la regla de css, 
    se pone en el archivo común de pie de página
	    /protected/views/comun_pie_mensaje_de_activar_javascript.php,
    luego de la función de javascript de ocultarlo, para evitar que el usuario vea un flashazo. Si se pone desde
    aquí, el usuario puede ver flashazos, por ejemplo cuando esta hoja de estilos de css esté en caché y cargue rápido,
    primero que el javascript de ocultar el mensaje de javascript. Por eso la regla aquí está vacía, y se coloca allí, 
    en el archivo común de pie de página común indicado. */
    /* Y es ocultado por: <script>ocultar_mensaje_de_activar_javascript();</script>, que debe estar también en librería común de javascript.
        No se lo oculta directamente con document.getElementById, buscando revisar que esa otra librería también esté incluida. */
}
hr {
    display: block;
    clear: both;    
}
.oculta, .oculto {
  display: none; /* Aplícase a objetos que al iniciar la página están escondidos */
}
.bloque {
    display: block;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Fin de elementos generales, comunes a las páginas */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ##Formularios */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
textarea, .descripciones_o_comentarios, .descripcion, .comentario { /* Las clases no necesariamente son de un textarea, porque el tinymce
    puede aplicar a más objetos de html, como un div. */
    width: 90%;
    min-width: 400px;
    height: 80px;
    display: block;
    background: #DDDDAA;
}
.input_de_fecha, #input_seccionofranja {
    height: 20px;
    width: 140px;
}
.botonsubmit, input[type=submit], input[type=button], button  {
    clear: both;
    font-size: 1.5em;
    font-weight: bold;
}
.botonsubmit:active, input[type=submit]:active, input[type=button]:active, button:active {
    
}
.clearnuestro, .clear_nuestro {
    clear: both; 
    float: none;
}
.rownuestro, .row_nuestro {
    clear: both;
    width: 100%;
    float: none;
}

#footer {
    padding: 10px;
    text-align: center;
    float: none;
    clear: both;
    background: #333333; 
    color: #E1E1E1; 
    font-size: 12px; 
    margin-top: 200px;
    
}
#footer a, #footer a:visited {
    color: #AAAAFF;
    
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Fin de formularios */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ##Mensajes */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#retroalimentacionsistema {
    position: fixed;
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: none;
    /* ********************* */
    color: 3 red solid;
    font-size: 20px;
    word-wrap: break-word;
}
/*
 * ##20170416 Hace falta:
<div id="retroalimentacionsistema_cerrar"></div>
#retroalimentacionsistema_cerrar {
    content: "X";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: #EEEE00;
    padding: 0.2em;
}
*/