/**
 * ==========================================================================
 * MAIN.CSS - SICOP
 * ==========================================================================
 * Estilos principales del sistema SICOP.
 * Define estructura, tipografía y componentes base.
 * 
 * ESTRUCTURA:
 * - #main     : Contenedor principal
 * - #tray     : Barra superior (usuario, sede, logout)
 * - #menu     : Menú horizontal principal
 * - #cols     : Contenedor de columnas
 * - #aside    : Sidebar izquierdo
 * - #content  : Área de contenido
 * - #footer   : Pie de página
 * ==========================================================================
 */

/* ==========================================================================
   TIPOGRAFÍA BASE
   ========================================================================== */

body {
    font: 0.8em/2 "Arial", sans-serif;
}

h1, h2, h3, h4, h5, h6,
address, blockquote, dl, fieldset, ol, p, table, ul {
    margin: 15px 0;
}

/* Tamaños de encabezados en contenido */
#content h1 { font-size: 140%; }
#content h2 { font-size: 160%; }
#content h3 { font-size: 140%; }
#content h4 { font-size: 120%; }
#content h5,
#content h6 { font-size: 100%; }

/* ==========================================================================
   TABLAS
   ========================================================================== */

#content table {
    margin: 0;
    border-collapse: collapse;
}

#content table.width100 {
    width: 100%;
}

#content table th {
    text-align: left;
    vertical-align: middle;
    font-weight: bold;
}

/* Tabla de listado de clientes */
.list_clientes {
    margin: 0;
    border-collapse: collapse;
    width: 100%;
}

.list_clientes th,
.list_clientes td {
    padding: 3px;
}

.list_clientes th {
    text-align: left;
    vertical-align: middle;
    font-weight: bold;
}

/* Vista detalle (CDetailView de Yii) */
table.detail-view .null {
    color: blue !important;
}

/* ==========================================================================
   LISTAS
   ========================================================================== */

#content ul {
    margin: 15px 0;
    list-style: none;
}

#content ul ul {
    margin: 0 0 0 10px;
}

#content ul ul li {
    padding-left: 15px;
    background: url("../design/ul-ul.gif") 0 4px no-repeat;
}

#content ol {
    margin: 15px 0 15px 30px;
    list-style-type: decimal;
}

#content ol ol {
    margin: 0 0 0 20px;
}

#content ol ol li {
    list-style-type: lower-alpha;
}

/* Lista de errores */
.errorSummary ul li {
    padding-left: 15px;
    background: url("../design/ul.gif") 0 4px no-repeat;
}

/* ==========================================================================
   FORMULARIOS Y FIELDSETS
   ========================================================================== */

#content fieldset {
    position: relative;
    margin: 10px 0;
    padding: 10px;
}

#content legend {
    font-size: 120%;
    font-weight: bold;
}

#content dl {
    clear: both;
}

#content dl dt {
    font-weight: bold;
}

#content dl dd {
    margin: 0 0 5px 0;
}

#content code {
    font-family: monospace;
}

#content .help {
    cursor: help;
}

/* ==========================================================================
   CLASES SIN ESTILOS (nostyle)
   ========================================================================== */

table.nostyle,
table.nostyle th,
table.nostyle td {
    border: 0 !important;
}

table.nostyle th {
    background: none !important;
    text-align: left !important;
}

table.nostyle th,
table.nostyle td {
    padding: 3px 5px !important;
}

ul.nostyle {
    margin: 15px 0 15px 20px !important;
    list-style-type: square !important;
}

ul.nostyle ul {
    margin: 0 0 0 25px !important;
    list-style-type: square !important;
}

ul.nostyle li {
    padding: 0 !important;
    background: none !important;
}

dl.nostyle dt {
    font-weight: bold !important;
}

dl.nostyle dd {
    margin: 0 !important;
}

/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */

#main {
    min-width: 980px;
}

/* Barra superior */
#tray {
    padding: 6px 15px;
    background: url("../design/tray.gif") 0 0 repeat-x;
    font: 85%/1.2 "Tahoma", sans-serif;
}

#tray p {
    margin: 0;
}

#tray p.f-left {
    width: 50%;
}

#tray #logout {
    padding-left: 18px;
    background: url("../design/tray-logout.gif") 0 50% no-repeat;
    text-transform: uppercase;
}

/* Selector de columnas */
#tray #switcher {
    margin-right: 15px;
}

#tray #switcher img {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    border: 0;
}

/* ==========================================================================
   MENÚ PRINCIPAL
   ========================================================================== */

#menu {
    padding: 4px 13px;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#menu ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

#menu ul li a {
    float: left;
    margin-right: 5px;
    padding-left: 5px;
    text-decoration: none;
    cursor: pointer;
}

#menu ul li a span {
    float: left;
    display: block;
    padding: 7px 15px 9px 8px;
}

#menu ul li#menu-active a {
    font-weight: bold;
}

/* ==========================================================================
   ÁREA DE CONTENIDO
   ========================================================================== */

#content {
    padding: 10px 15px;
    overflow: hidden;
}

/* Título principal del contenido */
#content h1 {
    margin: 0;
    padding: 2px 15px;
    background: url("../design/content-h1.gif") 0 0 repeat-x;
    letter-spacing: -1px;
}

/* Columnas dentro del contenido */
#content .col50 { float: left; width: 49%; }
#content .col33 { float: left; width: 32%; }
#content .col33.center { padding: 0 2%; }

/* ==========================================================================
   TABS (Pestañas)
   ========================================================================== */

#content .tabs {
    margin: 15px 0;
}

#content .tabs ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#content .tabs ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

#content .tabs a {
    float: left;
    margin-right: 3px;
    padding-left: 4px;
    background: url("../design/tabs-l.gif") 0 -100px no-repeat;
    text-decoration: none;
}

#content .tabs a span {
    float: left;
    display: block;
    padding: 8px 15px 6px 11px;
    background: url("../design/tabs-r.gif") 100% -100px no-repeat;
}

#content .tabs a:hover,
#content .tabs a:hover span {
    text-decoration: underline;
}

#content .tabs .ui-tabs-selected a {
    background: url("../design/tabs-l.gif") 0 0 no-repeat;
    font-weight: bold;
}

#content .tabs .ui-tabs-selected a span {
    background: url("../design/tabs-r.gif") 100% 0 no-repeat;
}

#content .tabs .ui-tabs-selected a:hover,
#content .tabs .ui-tabs-selected a:hover span {
    text-decoration: none;
}

#content .ui-tabs-hide {
    display: none !important;
}

/* ==========================================================================
   SIDEBAR (#aside)
   ========================================================================== */

#aside .padding {
    padding-left: 15px;
}

/* Logo */
#aside #logo {
    margin: 0 0 15px 0;
}

#aside #logo img {
    display: block;
    width: 180px;
    padding: 10px;
}

/* Búsqueda en sidebar */
#aside #search fieldset {
    padding: 7px 10px;
}

#aside #search fieldset p {
    margin: 0;
}

#aside #search fieldset legend {
    font-weight: bold;
}

#aside #search fieldset .input-text {
    width: 130px;
}

#aside #search fieldset #search-options {
    margin-top: 10px;
}

/* Botón crear */
#aside #btn-create {
    margin: 0 0 15px 0;
}

#aside #btn-create a {
    float: left;
    padding-left: 27px;
    height: 37px;
    overflow: hidden;
    background: url("../design/btn-create-left.gif") 0 0 no-repeat;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

#aside #btn-create a span {
    float: left;
    display: block;
    width: 163px;
    padding: 8px 0 10px 10px;
    background: url("../design/btn-create-right.gif") -2px 0 no-repeat;
}

#aside #btn-create a:hover {
    background-position: 0 -37px;
}

/* Menú del sidebar */
#aside ul {
    width: 215px;
    margin: 0 0 15px 0;
    list-style: none;
}

#aside ul li {
    display: inline;
}

#aside ul li a {
    display: block;
    width: 185px;
    padding: 4px 15px;
    text-decoration: none;
}

#aside ul li#submenu-active a {
    width: 198px;
    border: 0;
    z-index: 999;
}

#aside ul ul {
    margin: 0;
    position: static;
}

#aside ul ul li a,
#aside ul li#submenu-active ul li a {
    width: 170px;
    padding: 5px 15px 5px 30px;
    font: 85%/1.2 "Tahoma", sans-serif;
    font-weight: normal;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer {
    clear: both;
    padding: 15px;
    font: 85%/1.2 "Tahoma", sans-serif;
}

#footer p {
    margin: 0;
}

/* ==========================================================================
   CAMPOS DE FORMULARIO
   ========================================================================== */

.input-text {
    padding: 3px;
    font: 100%/1.5 "Arial", sans-serif;
}

.input-text-02 {
    padding: 5px;
    font: 140%/1.5 "Arial", sans-serif;
}

.input-submit {
    padding: 5px;
    font-size: 120%;
}

.input-submit-02 {
    padding: 1px;
    font-size: 100%;
}

/* Campos con error */
input.error {
    border: 1px solid #C00;
    color: #C00;
    background: #FEEBEB;
    font: 100%/1.5 "Arial", sans-serif;
    padding: 4px;
}

select.error {
    border: 1px solid #C00;
    color: #C00;
    font-size: 12px;
    float: left;
    background: #FEEBEB;
}

.errorMessage {
    padding: 0;
    color: #900;
    line-height: 19px;
}

.errorSummary {
    margin: 20px;
    padding: 10px 10px 10px 35px;
    background: url("../design/ico-delete.gif") 10px 25px no-repeat;
    background-color: #FEEBEB;
    border: 2px solid #FFAEAE;
}

/* ==========================================================================
   MENSAJES DE ALERTA
   ========================================================================== */

.msg {
    padding: 10px 10px 10px 35px;
}

.msg.warning { background: url("../design/ico-warning.gif") 10px 10px no-repeat; }
.msg.info    { background: url("../design/ico-info.gif") 10px 10px no-repeat; }
.msg.done    { background: url("../design/ico-done.gif") 10px 50% no-repeat; }
.msg.error   { background: url("../design/ico-delete.gif") 10px 25px no-repeat; }

/* ==========================================================================
   TAMAÑOS DE FUENTE
   ========================================================================== */

.bigger  { font-size: 120%; }
.smaller { font: 85%/1.2 "Tahoma", sans-serif; }

/* ==========================================================================
   UTILIDADES DE LAYOUT
   ========================================================================== */

#success {
    margin-top: 10px;
}

.form {
    width: 430px;
    float: left;
    margin-right: 10px;
}

.list {
    width: 430px;
    float: left;
}

.separador {
    clear: both;
    display: block;
}

.buttons {
    float: right;
    margin: 30px;
}

.search {
    background: #F1F1F1;
    padding: 10px;
    margin-top: 10px;
}

.row {
    padding: 20px 0 0 20px;
}

/* ==========================================================================
   ICONOS Y OPCIONES
   ========================================================================== */

/* Iconos grandes */
#iconsOptions a {
    text-decoration: none;
    width: auto;
    float: left;
    text-align: center;
    background: #FBFBFB;
    padding: 30px;
    margin: 2px;
    height: auto;
    color: #014282;
    border: 1px solid #CCC;
    border-radius: 10px;
}

#iconsOptions a:hover {
    color: #E4433E;
    border: 1px solid #E4433E;
}

/* Iconos pequeños */
#iconsOptionsSmall h5 {
    margin: 0;
}

#iconsOptionsSmall a {
    text-decoration: none;
    min-width: 80px;
    font-size: 12px;
    background: #FBFBFB;
    float: left;
    text-align: center;
    padding: 10px;
    margin: 2px;
    height: auto;
    color: #014282;
    border: 1px solid #CCC;
    border-radius: 10px;
}

#iconsOptionsSmall a:hover {
    color: #E4433E;
    border: 1px solid #E4433E;
}

#iconsOptionsSmall img {
    width: 32px;
}

/* Iconos extra pequeños */
#iconsOptionsXSmall {
    margin: 0;
}

#iconsOptionsXSmall a {
    text-decoration: none;
    min-width: 35px;
    font-size: 12px;
    background: #eaf5f7;
    float: left;
    text-align: center;
    padding: 4px;
    margin: 0.5px;
    height: auto;
    color: #014282;
    border: 1px solid #CCC;
}

#iconsOptionsXSmall a:hover {
    background: #F1F1F1;
    border: 1px solid #ccc;
}

#iconsOptionsXSmall img {
    width: 26px;
}

/* Botón activo */
.btnactivo {
    background: #9BCD69 !important;
    color: #000 !important;
    border: none !important;
}

/* Selector de estado */
#statusSelect {
    width: 100%;
    text-align: center;
    margin: 0.5px;
}

/* ==========================================================================
   CAJAS DE INFORMACIÓN
   ========================================================================== */

#InfoOptions-info span {
    font-size: 13px;
    color: #014282;
    background-color: #E8F6FF;
    border: 2px solid #B8E2FB;
    padding: 6px 10px 6px 6px;
}

#InfoOptions-alert span {
    font-size: 13px;
    color: #c77405;
    background-color: #FFF5CC;
    border: 2px solid #F2DD8C;
    padding: 2px 3px 2px 2px;
}

#InfoOptions-error span {
    font-size: 13px;
    color: #900;
    background-color: #FEEBEB;
    border: 2px solid #FFAEAE;
    padding: 6px 10px 6px 6px;
}

#InfoOptions-success span {
    font-size: 13px;
    color: #327E04;
    background-color: #EAF7D9;
    border: 2px solid #BBDF8D;
    padding: 6px 10px 6px 6px;
}