.tickets-container{max-width:100%;margin:20px 0}
.tickets-tabs{border-bottom:1px solid #e0e0e0;margin-bottom:24px}
.tab-button{background:#e8f0fe;border:1px solid #dee2e6;border-bottom:0;padding:12px 20px;cursor:pointer;margin-right:2px;color:#495057;transition:all .2s;border-radius:8px 8px 0 0}
.tab-button.active{background:#fff;color:#4285F4;border-bottom:1px solid #fff;margin-bottom:-1px;box-shadow:0 -2px 4px rgba(66,133,244,.1)}
.tab-button:hover{background:#e9ecef;color:#4285F4}
.tab-content{display:none}
.tab-content.active{display:block}

.tickets-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.08);margin:24px 0}
.tickets-table th{background:linear-gradient(135deg,#4285F4,#5a95f5);padding:16px;border-bottom:2px solid #4285F4;font-weight:600;color:#fff;font-size:14px}
.tickets-table td{padding:16px;border-bottom:1px solid #f0f0f0;font-size:14px;vertical-align:middle}
.tickets-table tr:hover{background:linear-gradient(135deg,#e8f0fe,#fff)}

.estado-badge{padding:6px 14px !important;border-radius:20px !important;font-size:12px !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:.5px !important;display:inline-block !important;line-height:1.2 !important;white-space:nowrap !important}

.button,.ver-ticket-btn{background:linear-gradient(135deg,#4285F4,#2a69c7);color:#fff;border:0;padding:10px 20px;border-radius:8px;cursor:pointer;text-decoration:none;font-size:14px;font-weight:500;transition:all .3s;box-shadow:0 2px 4px rgba(66,133,244,.2)}
.button:hover,.ver-ticket-btn:hover{background:linear-gradient(135deg,#2a69c7,#1557d0);color:#fff;transform:translateY(-1px);box-shadow:0 4px 8px rgba(66,133,244,.3)}
.button:active,.ver-ticket-btn:active{transform:translateY(0)}

.volver-btn{background:#fff;color:#4285F4;border:2px solid #4285F4;margin-bottom:12px;padding:6px 16px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.volver-btn:hover{background:#4285F4;color:#fff;transform:translateX(-4px)}

.ticket-detalle{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08);margin:20px 0;overflow:hidden}
.ticket-header{background:linear-gradient(135deg,#4285F4,#5a95f5);color:#fff;padding:20px 24px;border-bottom:2px solid #2a69c7}
.ticket-header h3{margin:8px 0 0;font-size:20px;font-weight:600;color:#fff;display:flex;flex-direction:column;gap:4px}
.ticket-header h3 .ticket-id{font-size:14px;font-weight:400;color:#e8f0fe;text-transform:uppercase;letter-spacing:0.5px;opacity:0.9}
.ticket-header h3 .ticket-titulo{font-size:22px;font-weight:700;color:#fff;line-height:1.3;margin-top:4px}

.ticket-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:32px 24px;background:linear-gradient(135deg,#e8f0fe,#fff);border-bottom:1px solid #4285F4}
.ticket-info-col{padding:16px;background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05);border-left:4px solid #4285F4}
.ticket-info-col strong{color:#4285F4;font-weight:700;display:block;margin-bottom:8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}

.ticket-contenido,.ticket-actualizaciones,.ticket-responder,.ticket-acciones{padding:24px;border-bottom:1px solid #f0f0f0}
.ticket-contenido h4,.ticket-actualizaciones h4,.ticket-responder h4{margin:0 0 20px;color:#4285F4;font-size:20px;font-weight:700;padding-bottom:8px;border-bottom:2px solid #4285F4}

.contenido-inicial{background:linear-gradient(135deg,#e8f0fe,#fff);padding:24px;border-left:4px solid #4285F4;border-radius:0 12px 12px 0;margin-bottom:20px;line-height:1.7;box-shadow:0 2px 4px rgba(0,0,0,.05)}

.actualizaciones-lista .actualizacion-item{background:linear-gradient(135deg,#e8f0fe,#fff);padding:24px;margin-bottom:20px;border-radius:12px;border-left:4px solid #4285F4;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.actualizacion-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #e9ecef}
.actualizacion-header strong{color:#4285F4;font-weight:700;font-size:16px}
.actualizacion-header .fecha{color:#fff;font-size:12px;background:linear-gradient(135deg,#6c757d,#495057);padding:6px 12px;border-radius:20px;font-weight:500}

.form-table th{width:140px;padding:16px 0;font-weight:700;color:#495057;vertical-align:top}
.form-table td{padding:12px 0}
.regular-text,textarea{width:100%;max-width:500px;padding:14px 16px;border:2px solid #ced4da;border-radius:8px;font-size:14px;transition:all .3s;background:#fff}
.regular-text:focus,textarea:focus{border-color:#4285F4;outline:0;box-shadow:0 0 0 3px rgba(66,133,244,.1);background:#f8f9fa}
textarea{resize:vertical;min-height:120px;max-width:100%;line-height:1.6}

.lista-archivos-inline{list-style:none;padding:0;margin:12px 0}
.lista-archivos-inline li{padding:12px 0;border-bottom:1px solid #f0f0f0;font-size:14px}
.lista-archivos-inline a{color:#4285F4;text-decoration:none;font-weight:600;padding:4px 8px;border-radius:4px;transition:all .2s}
.lista-archivos-inline a:hover{background:#4285F4;color:#fff;text-decoration:none}
.archivo-info-inline{color:#6c757d;font-size:11px;margin-left:8px}

.ticket-acciones{background:#e8f0fe;border:1px solid #e9ecef;border-radius:8px;padding:24px;margin:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.accion-grupo{display:flex;flex-direction:column;gap:8px;width:100%}
.accion-grupo label{display:block;margin-bottom:6px;font-weight:600;color:#495057;font-size:13px;text-transform:uppercase;letter-spacing:0.5px}
.accion-grupo select{width:100%;padding:12px 14px;border:2px solid #ced4da;border-radius:6px;font-size:14px;background:#fff;transition:all 0.2s;margin:0;min-height:44px;line-height:1.5}
.accion-grupo select:focus{border-color:#4285F4;box-shadow:0 0 0 3px rgba(66,133,244,0.1);outline:none}
.accion-grupo button{width:100%;padding:10px 20px;font-weight:600;margin-top:8px;border:none;border-radius:6px;cursor:pointer;transition:all 0.2s}
.btn-cambiar-estado{background:#4285F4;color:#fff}
.btn-cambiar-estado:hover{background:#1a5fd8;transform:translateY(-1px);box-shadow:0 2px 4px rgba(66,133,244,0.2)}
.btn-reasignar{background:#5a95f5;color:#fff}
.btn-reasignar:hover{background:#138496;transform:translateY(-1px);box-shadow:0 2px 4px rgba(23,162,184,0.2)}

.archivos-actualizacion{margin-top:20px;padding-top:20px;border-top:2px solid #e9ecef}
.archivos-actualizacion strong{color:#4285F4;font-size:14px;font-weight:700}

.ticket-cerrado{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;padding:24px;border-radius:12px;text-align:center;font-weight:700;margin-bottom:24px;border:2px solid #f5c6cb}
.ticket-error{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;padding:20px;border-radius:12px;margin:20px 0;border:2px solid #f5c6cb}

/* NUEVO: Estilos para el formulario de crear ticket - Mismo look que actualizar */
.ticket-crear-form {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    padding: 24px;
    margin-top: 20px;
}

.crear-form-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-size: 14px;
    font-weight: 700;
    color: #4285F4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilos separados para inputs de texto y textareas */
.form-field input[type="text"],
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #ced4da;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1.5;
    transition: all 0.3s;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Estilos específicos para selects con mayor altura */
.form-field select {
    width: 100%;
    min-height: 55px; /* Aumentado de 48px a 52px */
    height: 55px; /* Altura fija para consistencia */
    padding: 15px 40px 15px 16px; /* Más padding vertical */
    border: 2px solid #ced4da;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.4; /* Ajustado para mejor alineación */
    transition: all 0.3s;
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23495057' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.form-field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Estados de focus */
.form-field input[type="text"]:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #4285F4;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(66,133,244,.1);
    background-color: #e8f0fe;
}

/* Archivos */
.form-field input[type="file"] {
    padding: 12px 0;
    font-size: 14px;
    border: 2px dashed #ced4da;
    border-radius: 8px;
    background: #e8f0fe;
    cursor: pointer;
    transition: all 0.3s;
}

.form-field input[type="file"]:hover {
    border-color: #4285F4;
    background: #e8f0fe;
}

.form-field .description {
    font-size: 13px;
    color: #6c757d;
    font-style: italic;
    margin: 4px 0 0 0;
}

/* Acciones del formulario */
.form-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 16px;
    border-top: 2px solid #f0f0f0;
    margin-top: 8px;
}

.form-actions .button-large {
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg,#4285F4,#2a69c7);
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(66,133,244,.2);
}

.form-actions .button-large:hover {
    background: linear-gradient(135deg,#2a69c7,#1557d0);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(66,133,244,.3);
}

.form-actions .button-large:active {
    transform: translateY(0);
}

/* Placeholder styles */
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #6c757d;
    opacity: 0.8;
    font-size: 18px;
}

/* Animación de carga para el botón */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 124, 186, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 124, 186, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 124, 186, 0);
    }
}

.form-actions .button-large:disabled {
    animation: pulse 1.5s infinite;
    opacity: 0.8;
    cursor: not-allowed;
}

/* Media queries específicas para el formulario crear */
@media (max-width: 768px) {
    .ticket-crear-form {
        padding: 20px;
        margin: 16px -10px;
        border-radius: 8px;
    }
    
    .crear-form-content {
        gap: 16px;
    }
    
    .form-field label {
        font-size: 14px;
    }
    
    .form-field input[type="text"],
    .form-field select,
    .form-field textarea {
        font-size: 18px !important;
        padding: 12px 14px;
    }
    
    .form-field select {
        padding-right: 40px;
    }
    
    /* Mejorar legibilidad del contenido en tablets con especificidad alta */
    body #tickets-sistema .ticket-info-col {
        font-size: 17px !important;
    }
    body #tickets-sistema .ticket-info-col strong {
        font-size: 15px !important;
    }
    body #tickets-sistema .contenido-inicial {
        font-size: 17px !important;
        line-height: 1.7 !important;
        padding: 20px !important;
    }
    body #tickets-sistema .actualizacion-item {
        font-size: 17px !important;
        line-height: 1.7 !important;
        padding: 20px !important;
    }
    body #tickets-sistema .actualizacion-item p {
        font-size: 17px !important;
        line-height: 1.7 !important;
    }
    body #tickets-sistema .actualizacion-header strong {
        font-size: 19px !important;
    }
    body #tickets-sistema .tickets-table td {
        font-size: 16px !important;
    }
    body #tickets-sistema .tickets-table td:before {
        font-size: 15px !important;
    }
    
    .form-actions .button-large {
        width: 100%;
        justify-content: center;
        padding: 14px 20px !important;
    }
}

@media (max-width: 480px) {
    .ticket-crear-form {
        padding: 16px;
        margin: 12px -8px;
    }
    
    .form-field input[type="text"],
    .form-field select,
    .form-field textarea {
        padding: 10px 12px;
    }
    
    .form-field textarea {
        min-height: 100px;
    }
}

/* Media queries responsive */
@media (max-width:768px){
    .ticket-info-grid{grid-template-columns:1fr;gap:16px;padding:20px}
    .ticket-info-col{padding:12px}
    .accion-grupo{display:block;margin-bottom:24px;margin-right:0}
    .accion-grupo select{width:100%;margin-bottom:12px;margin-right:0}
    .accion-grupo button{width:100%}
    .tickets-table{font-size:13px}
    .tickets-table th,.tickets-table td{padding:12px 8px}
    .ticket-detalle{margin:16px 0}
    .ticket-header{padding:20px}
    .ticket-header h3{font-size:22px}
    .ticket-contenido,.ticket-actualizaciones,.ticket-responder,.ticket-acciones{padding:16px}
    .actualizacion-header{flex-direction:column;align-items:flex-start;gap:8px}
    .ticket-acciones{grid-template-columns:1fr;gap:20px}
    
    /* Formulario crear ticket en móvil */
    .ticket-crear-form {
        padding: 20px;
        margin: 16px -10px;
        border-radius: 8px;
    }
    
    .crear-form-content {
        gap: 16px;
    }
    
    .form-field label {
        font-size: 13px;
    }
    
    .form-field input[type="text"],
    .form-field select,
    .form-field textarea {
        font-size: 18px; /* Mejor legibilidad, previene zoom en iOS */
        padding: 12px 14px;
    }
    
    .form-actions .button-large {
        width: 100%;
        justify-content: center;
        padding: 14px 20px !important;
    }
    
    /* Tabla responsive para móviles - NUEVO */
    .tickets-table thead {
        display: none;
    }
    
    .tickets-table tr {
        display: block;
        margin-bottom: 20px;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    body #tickets-sistema .tickets-table td {
        display: block;
        padding: 12px 0;
        border: none;
        position: relative;
        padding-left: 40%;
        font-size: 17px !important;
        line-height: 1.6 !important;
    }
    
    body #tickets-sistema .tickets-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 35%;
        font-weight: 600;
        color: #495057;
        font-size: 16px !important;
    }
    
    .tickets-table td:last-child {
        padding-left: 0;
        text-align: center;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;
        margin-top: 8px;
    }
    
    .tickets-table td:last-child:before {
        display: none;
    }
    
    .tickets-table td:first-child {
        padding-left: 0;
        margin-bottom: 8px;
    }
    
    .tickets-table td:first-child:before {
        display: none;
    }
    
    .tickets-table .estado-badge {
        display: inline-block;
        margin-bottom: 8px;
    }
}

@media (max-width:480px){
    /* Estilos específicos para superar interferencia del tema Astra */
    body #tickets-sistema .tab-button{padding:8px 12px;font-size:13px !important}
    body #tickets-sistema .ticket-info-col{font-size:18px !important}
    body #tickets-sistema .ticket-info-col strong{font-size:16px !important}
    body #tickets-sistema .ticket-info-grid{padding:16px;gap:12px}
    body #tickets-sistema .ticket-header{padding:16px}
    body #tickets-sistema .ticket-header h3{font-size:22px !important}
    body #tickets-sistema .ticket-header h3 .ticket-titulo{font-size:26px !important}
    
    /* Mejorar legibilidad del contenido en móviles con mayor especificidad */
    body #tickets-sistema .contenido-inicial{font-size:18px !important; line-height:1.7 !important; padding:20px !important}
    body #tickets-sistema .actualizacion-item{font-size:18px !important; line-height:1.7 !important; padding:20px !important}
    body #tickets-sistema .actualizacion-item p{font-size:18px !important; line-height:1.7 !important}
    body #tickets-sistema .actualizacion-header strong{font-size:20px !important}
    body #tickets-sistema .actualizacion-header .fecha{font-size:16px !important; padding:8px 14px !important}
    
    /* Formularios más legibles con especificidad alta */
    body #tickets-sistema .regular-text, 
    body #tickets-sistema textarea, 
    body #tickets-sistema select,
    body #tickets-sistema input[type="text"]{font-size:18px !important; padding:16px !important; min-height:50px !important}
    
    /* Textos de información con especificidad muy alta */
    body #tickets-sistema .ticket-contenido p, 
    body #tickets-sistema .actualizacion-item p,
    body #tickets-sistema .contenido-inicial p{font-size:18px !important; line-height:1.7 !important}
    
    /* Labels y botones con especificidad alta */
    body #tickets-sistema label{font-size:16px !important}
    body #tickets-sistema .button, 
    body #tickets-sistema .ver-ticket-btn{font-size:18px !important; padding:14px 22px !important; min-height:50px !important}
    
    /* Tablas con especificidad muy alta */
    body #tickets-sistema .tickets-table td{font-size:18px !important; line-height:1.6 !important}
    body #tickets-sistema .tickets-table td:before{font-size:16px !important}
    
    /* Formulario crear ticket en móvil pequeño */
    .ticket-crear-form {
        padding: 16px;
        margin: 12px -8px;
    }
    
    .form-field input[type="text"],
    .form-field select,
    .form-field textarea {
        padding: 10px 12px;
    }
    
    .form-field textarea {
        min-height: 100px;
    }
}

.description{font-style:italic;color:#6c757d;font-size:12px;margin-top:6px}

/* Botones de acción del ticket - mismo tamaño */
.btn-ticket-action {
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-height: 40px !important;
    height: 40px !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 8px !important;
    box-sizing: border-box !important;
}

.btn-ticket-action:last-child {
    margin-right: 0 !important;
}